<script>
export default {
  name: "listHeader",
  props: {
    title: {
      type: String,
      default: '家庭成员'
    },
    width:{
      type: String,
      default: '702rpx'
    }
  },
  methods: {
    listHeaderIconClick() {
      this.$emit('listHeaderIconClick')
    },
    listHeaderAllClick(){
      this.$emit('listHeaderAllClick')
    }
  },
}
</script>

<template>
  <view class="listHeader rowSpaceBetween" @click.stop="listHeaderAllClick" :style="{
    width: width
  }">
    <view class="listHeader_left row items-center">
      <text class="listHeader_left_text">{{ title }}</text>
      <image class="listHeader_left_image" src="https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/shiqin_icon/add.png"
             @click.stop="listHeaderIconClick"></image>
      <slot></slot>
    </view>
    <view class="listHeader_right">
      <image class="listHeader_right_image" src="/static/shiqin-images/arrow_right.png"></image>
    </view>
  </view>
</template>

<style scoped lang="scss">
.listHeader {
  margin: 30rpx 0 30rpx 0;

  .listHeader_left {
    position: relative;
    .listHeader_left_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #000000;
    }

    .listHeader_left_image {
      margin-left: 10rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }

  .listHeader_right {
    .listHeader_right_image {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>